<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-10 10:39:08
 * @LastEditTime: 2023-12-14 18:04:40
-->
<script setup lang="ts" name="ApproveConfig">
import type { Component } from 'vue'
// import ApprovalDetail from './components/ApprovalDetail.vue'
import ApprovalDetail from '@/global/components/BusinessCom/ApproveDetail/ApprovalDetail.vue'
import '@/assets/styles/approve-center.scss'
import useTabbarStore from '@/global/store/modules/tabbar'
const InitiateApproval: Component = defineAsyncComponent(
  () => import('./components/InitiateApproval.vue')
)
const IApproved: Component = defineAsyncComponent(
  () => import('./components/IApproved.vue')
)
const ISubmitted: Component = defineAsyncComponent(
  () => import('./components/ISubmitted.vue')
)
const CopyToMe: Component = defineAsyncComponent(
  () => import('./components/CopyToMe.vue')
)
const ShareWithMe: Component = defineAsyncComponent(
  () => import('./components/ShareWithMe.vue')
)

const coomm = {
  InitiateApproval,
  IApproved,
  ISubmitted,
  CopyToMe,
  ShareWithMe
}

const tabList = [
  {
    label: '发起审批',
    id: EApproveListTab.发起审批
  },
  {
    label: '我审批的',
    id: EApproveListTab.我审批的
  },
  {
    label: '我提交的',
    id: EApproveListTab.我提交的
  },
  {
    label: '抄送我的',
    id: EApproveListTab.抄送我的
  }
  // {
  //   label: '分享给我',
  //   name: 'ShareWithMe'
  // }
]

const route = useRoute()
/**
 * @description:
 * id=业务id，需要传到列表查询接口查出当前数据，自动点击按钮展示弹框
 * & tabSheet=tab值，控制最外层的tab
 * & typeCenter=WAIT（待审批）DOWN（已审批）需要根据typeCenter控制是选择待审列表还是已审列表
 * 处理完成需要判断是否从代办过来的， 用 typeCenter 判断
 * @return {*}
 */
const activeName: Ref<typeof EApproveListTab[keyof typeof EApproveListTab]> = ref(tabList[0].id)
const activeInnerName = ref()
const showDetail = ref(false)
const approveFlowStore = useApproveFlowStore()
const refApproveAnyTable = ref()

const checkRoute = () => {
  const { tabId, tabInnerId } = route.query as any
  if (tabId)
    activeName.value = tabId

  if (tabInnerId)
    activeInnerName.value = tabInnerId
}
checkRoute()

provide('activeName', activeName)
watch(
  () => approveFlowStore.showDetail,
  (v: any) => {
    if (v) {
      showDetail.value = true
    }
    else {
      approveFlowStore.setRowData(null)
      showDetail.value = false
    }
  }
)

watch(
  () => approveFlowStore?.socketInfo,
  val => {
    if (val?.tabId)
      activeName.value = tabList[Number.parseInt(val?.tabId)].id
  },
  { deep: true }
)

onMounted(() => {
  nextTick(() => {
    const name = tabList[Number.parseInt(approveFlowStore?.socketInfo?.tabId)]?.id
    name && (activeName.value = name)
  })
})

// const convertUpperCaseToDash = (input: string): string => {
//   return input.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
// }
// : { props: { name: string; }; }
const handleClick = (v: any) => {
  activeName.value = v
}
const getComponent = (key: keyof typeof coomm) => {
  return coomm[key]
}
// row: any
const viewDetails = () => {

}

const router = useRouter()
const tabbarStore = useTabbarStore()
const handleCancel = (val: boolean) => {
  approveFlowStore.setShowDetail(val)
  if (route.query.pathUrl) {
    router.push({
      path: route.query.pathUrl as string
    })
    // tabbarStore.remove(location.hash.slice(1))
    tabbarStore.remove(route.meta.activeMenu || route.fullPath)
  }
}
const handleConfirm = () => {
  approveFlowStore.setShowDetail(false)
  approveFlowStore.setRowData(null)
  refApproveAnyTable.value?.refApproveTable.queryData()
}
</script>

<template>
  <IkPageTabs
    v-model="activeName"
    split
    lazy-tab
    default-slot
    :tabs="tabList"
    @tab-click="handleClick"
  >
    <component
      :is="getComponent(activeName as any)"
      ref="refApproveAnyTable"
      :inner-name="activeInnerName"
      @view-details="viewDetails"
    />
    <ApprovalDetail
      :visible="showDetail"
      :row-data="approveFlowStore.rowData"
      @cancel="handleCancel"
      @handleConfirm="handleConfirm"
    />
  </IkPageTabs>
</template>

<style lang="scss" scoped>
:deep(.iflow-tabs.approve-list) {
  .el-tabs__header {
    margin: 0 !important;
  }

  .el-tabs__content {
    height: calc(100% - 55px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .iflow-approve-handover {
    width: 100%;
    border: none;

    & > .el-card__body {
      padding: 0;
    }
  }

  //  .el-table{
  //     height: calc(100% - 72px - 60px);
  //   }
}
</style>
